<template>
    <div class="introduction-main">
        <el-scrollbar>
            <div class="content">
                <Base />
                <template v-if="miniProgramType == 2">
                    <memberPhone :banner-list="bannerList" :poster-list="posterList" :navigation-data="navigation" />
                    <RightMemberOperate
                        ref="rightMemberRef"
                        :banner-list="bannerList"
                        :poster-list="posterList"
                        :navigation-data="navigation"
                        @changeForm="changeForm"
                        @delImgs="onDelImgs"
                        @submit="onImgs" />
                </template>
                <template v-if="miniProgramType == 1">
                    <Phone :banner-list="bannerList" :poster-list="posterList" />
                    <RightOperate
                        :banner-list="bannerList"
                        :poster-list="posterList"
                        @delImgs="onDelImgs"
                        @submit="onImgs" />
                </template>
            </div>
        </el-scrollbar>
        <el-card shadow="never" class="card-next">
            <div class="next">
                <el-button @click="goBack">取消</el-button>
                <el-button type="primary" @click="onSave">保存</el-button>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import Base from './components/base.vue';
import Phone from './components/phone.vue';
import memberPhone from './components/memberPhone.vue';
import RightMemberOperate from './components/memberRight.vue';
import RightOperate from './components/right.vue';

import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { miniAppCustomSet, miniAppCustomInfo } from '@/api/channelconfig/marketingApplet';
const rightMemberRef = ref<any>(null);
const router = useRouter();
const route = useRoute();

const bannerList = ref<any>([]);
const posterList = ref<any>([]);
const navigation = reactive<any>({
    num: 1,
    component: [
        {
            name: '',
            img: '',
            page_type: '',
            redirect_type: '',
            appid: '',
            url: ''
        }
    ]
});
const miniProgramType = ref<any>(route.query.type);

const initData = async () => {
    const params = {
        id: route.query.id
    };
    const res = await miniAppCustomInfo(params).catch((err: any) => {
        ElMessage.error(err);
    });
    if (res) {
        bannerList.value = res.rotation || [];
        posterList.value = res.poster || [];
        if (miniProgramType.value == 2) {
            if (Array.isArray(res.navigation)) {
                Object.assign(navigation, {
                    num: 1,
                    component: [
                        {
                            name: '',
                            img: '',
                            page_type: '',
                            redirect_type: '',
                            appid: '',
                            url: ''
                        }
                    ]
                });
            } else {
                Object.assign(navigation, res.navigation);
            }
        }
    }
};

const onDelImgs = (type?: any, index?: any) => {
    if (type == 1) {
        bannerList.value.splice(index, 1);
    }
    if (type == 2) {
        posterList.value.splice(index, 1);
    }
};

const onImgs = (type?: any, val?: any) => {
    if (type == 1) {
        bannerList.value.push({
            url: val.url
        });
    } else if (type == 2) {
        posterList.value.push({
            url: val.url
        });
    }
};

const onSave = async () => {
    const list: any = [];

    if (!bannerList.value.length) {
        ElMessage.error('请上传轮播图');
        return;
    } else if (!posterList.value.length) {
        ElMessage.error('请上传海报图');
        return;
    }
    let indentifyData = false;
    if (miniProgramType.value == 2) {
        indentifyData = await rightMemberRef.value.validate();
    } else {
        indentifyData = true;
    }
    if (indentifyData) {
        const banner: any = [];
        const poster: any = [];
        bannerList.value.map((el: any, index: number) => {
            banner.push({
                type: 1,
                sort: index + 1,
                url: el.url
            });
        });
        posterList.value.map((el: any, index: number) => {
            poster.push({
                type: 2,
                sort: index + 1,
                url: el.url
            });
        });
        const params = {
            id: route.query.id,
            data: {
                navigation: navigation,
                rotation: banner,
                poster: poster
            }
        };
        if (miniProgramType.value == 1) {
            delete params.data.navigation;
        }
        const res = await miniAppCustomSet(params).catch((err: any) => {
            ElMessage.error(err);
        });
        res && router.back();
    }
};

const goBack = () => {
    router.back();
};
const changeForm = (data?: any) => {
    Object.assign(navigation, data);
};
onMounted(() => {
    initData();
});
</script>
<style lang="scss" scoped>
.introduction-main {
    padding-top: 8px;

    .content {
        height: calc(100vh - 205px);
        display: flex;
        justify-content: space-between;
    }

    .card-next {
        position: relative;
        background: #fff;
    }

    .next {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
